<template>
	<view class="mSwitch">
		<view class="mSwitch-item" :style="{'color': (flag ? '#fff':'#000')}"  @click="changeSwtich(true)">每天</view>
		<view class="mSwitch-item" :style="{'color': (flag ? '#000' : '#fff')}" @click="changeSwtich(false)">一节</view>
		<view class="active" :style="{'right': (flag ? 'inherit' : '5rpx'), 'left': (flag ? '5rpx': 'inherit')}"></view>
	</view>
</template>

<script>
	export default {
		name: 'm-Swtich',
		model: {
			prop: 'flag',
			event: 'mClick'
		},
		props: {
			flag: {
				default: true,
				type: Boolean
			}
		},
		methods: {
			changeSwtich(flag) {
				this.$emit('mClick', flag)
			}
		}
	}
</script>

<style>
	.mSwitch{
		margin: 100rpx 20rpx 20rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		position: relative;
		background-color: #F7F8F8;
		// width: 700rpx;
	}
	
	.mSwitch-item{
		width: 320rpx;
		margin: 10rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: transparent;
		color: #000;
		z-index: 3;
		font-weight: 600;
	}
	
	.active{
		color: #fff;
		width: 320rpx;
		border-radius: 20rpx;
		background-color: #1A73E8;
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 2;
	}
</style>